<template>
  <el-card class="box-card" style="margin: 40px;">
    <div slot="header" class="clearfix">
      <span style="font-weight: bold; font-size: 20px;">
        流程图
        <el-tooltip placement="top" effect="light">
          <div slot="content">
            <span><i class="el-icon-s-opportunity" style="color: green">表示完成的节点</i></span><br>
            <span><i class="el-icon-s-opportunity" style="color: rgb(255, 0, 0)">表示等待其他人完成的节点</i></span><br>
            <span><i class="el-icon-s-opportunity" style="color: rgb(255, 196, 0)">表示需要本用户进行审核的节点</i></span>
          </div>
          <el-button type="text"><i class="el-icon-warning"></i></el-button>
        </el-tooltip>
      </span>
    </div>
    <div class="text item">
      <div class="canvas" ref="canvas" style="height: 200px;"></div>
    </div>
  </el-card>
</template>

<script>
import {getProcessBpmnByVersion, getProcessShowBpmn} from "@/api/camunda/camunda";
import BpmnViewer from "bpmn-js";

import MoveCanvasModule from 'diagram-js/lib/navigation/movecanvas'
import zoomScroll from './zoomScroll.js'

export default {
  name: "comment",
  props: {
    processInstanceId: {
      type: String
    },
    processKey: {
      type: String
    },
    processVersion: {
      type: Number
    }
  },
  data() {
    return {
    }
  },
  created() {
    this.init()
  },
  methods: {
    init(){
      if(this.$props.processKey && this.$props.processVersion) {
        getProcessBpmnByVersion(this.$props.processKey, this.$props.processVersion)
          .then(({data}) => {
            // 流程图
            const viewer = new BpmnViewer({
              container: this.$refs.canvas
            });
            viewer.importXML(data)
          })
      }
      getProcessShowBpmn(this.$props.processInstanceId)
        .then(({data}) => {
          if(data){
            // 流程图
            const viewer = new BpmnViewer({
              additionalModules: [
                MoveCanvasModule, // 移动整个画布
                zoomScroll,
              ],
              container: this.$refs.canvas
            });

            const _this = this
            viewer.importXML(data.bpmn, function (err) {
              if (!err) {
                // 让图能自适应屏幕
                const canvas = viewer.get('canvas')
                canvas.zoom('fit-viewport', 'auto')
                canvas.zoom(1)

                // 完成的节点高亮
                _this.setBpmnColor(data.finishPoint, canvas, 'highlight')

                // 待完成的节点
                _this.setBpmnColor(data.waitPoint, canvas, 'highlightTODO')

                // 有当前用户需完成的节点
                _this.setBpmnColor(data.doPoint, canvas, 'highlightIDO')
              }
            })
          }
        })
    },
    setBpmnColor(data, canvas, color){
      data.forEach((item) => {
        if(!item.includes('#')){
          canvas.addMarker(item, color)
        }
      })
    },
  }
}
</script>

<style>
.highlight .djs-visual > :nth-child(1) {
  stroke: green !important;
  text-color: green !important;
  /*fill: rgba(0, 80, 0, 0.4) !important;*/
}
.highlightIDO .djs-visual > :nth-child(1) {
  stroke: rgb(255, 196, 0) !important;
  /*fill: rgba(255, 196, 0, 0.4) !important;*/
}
.highlightTODO .djs-visual > :nth-child(1) {
  stroke: rgb(255, 0, 0) !important;
  /*fill: rgba(255, 255, 255, 0.4) !important;*/
}
</style>

<style scoped>

</style>
